<template>
  <van-card
      v-for="user in userList"
      :desc="user.userAccount"
      :title="user.nickName"
      :thumb="user.avatarUrl"
      style="top: 56px"
  >
    <template #tags>
      <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 4px">{{ tag }}</van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>
  <van-empty style="padding-top: 176px" v-if="userList.length<1" description="搜索结果为空" />
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useRoute} from "vue-router";
import myAxios from '../plugins/myAxios';
import qs from 'qs';
import {userType} from "../model/user";

const route = useRoute()
const {tags} = route.query;
const userList = ref<userType[]>([]);
onMounted(async () => {
  const userListData: userType[] = await myAxios.get('/search/tags', {
    params: {
      tagList: tags,
      pageSize: 10,
      pageNum:1,
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
      .then(function (response) {
        console.log('/search/tags 请求成功', response);
        return response.data?.records
      })
      .catch(function (error) {
        console.error('/search/tags 请求失败', error);
      })
      .finally(function () {
        // 总是会执行
      })
  if (userListData) {
    userListData.forEach(user=>{
      if(user.tags){
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData
  }
})

console.log(route);

// const mockUser = {
//   id: 12334,
//   userName: '郭佳宏',
//   userAccount: 'meidaoli',
//   avatarUrl: '11',
//   gender: '男',
//   phone: '12344',
//   email: '12323',
//   userStatus: 1,
//   userRole: 1,
//   tags: ['nan', '内部'],
//   createTime: new Date()
//
// }


</script>

<style scoped>


</style>
